<template>
	<view class="container">
		<!-- <view class="search">
	    <navigator url="/pages/search/search" class="input">
	      <image class="icon"></image>
	      <text class="txt">商品搜索, 共{{goodsCount}}款好物</text>
	    </navigator>
	  </view> -->
		<view class="catalog">
			<scroll-view class="nav" scroll-y="true">
				<view class="item" v-for="(item,index) in navList" :class="item.id == id ? 'active' : ''"
					@click="getContent(index+1)" :data-id="item.id" :data-index="index" bindtap="switchCate">
					{{item.name}}</view>
			</scroll-view>
			<scroll-view class="cate" scroll-y="true">
				<navigator url="url" class="banner">
					<image class="image" :src="categoryList.wap_banner_url"></image>
					<!-- <view class="txt">{{categoryList.front_name}}</view> -->
				</navigator>
				<view class="hd">
					<text class="line"></text>
					<text class="txt">{{categoryList.name}}</text>
					<text class="line"></text>
				</view>
				<view class="bd">
					<!-- url="/pages/category/category?id={{item.id}}" -->
					<navigator class="item" :class="(index+1) % 3 == 0 ? 'last' : ''" url="" @click="toggle(item)"
						v-for="(item,index) in categoryList.subCategoryList">
						<image class="icon" :src="item.wap_banner_url"></image>
						<text class="txt">{{item.name}}</text>
					</navigator>
				</view>
			</scroll-view>
		</view>
		<view class="kefu_box">
			<button class="chat-button" open-type="contact">客服</button>
		</view>
		<view v-if="show" class="mask" @tap="hideModal">
			<view class="modal" @tap.stop>
				<view class="modal-content">
					<!-- 图片 -->
					<image class="modal-image" :src="imageUrl" mode="widthFix" show-menu-by-longpress="true"></image>
					<!-- 电话号码和拨打电话按钮 -->
					<view class="phone-section">
						<text class="phone-number">联系电话：{{ phoneNumber }}</text>
						<button class="call-button" @tap="makePhoneCall" size="mini">拨打电话</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	// 引入微信小程序的客服消息接口
	export default {
		data() {
			return {
				id: 1,
				imageUrl: require('@/static/image/fwzx/fwzx.jpg'),
				phoneNumber: '18271717476',
				categoryList: {},
				show: false,
				navList: [{
						id: 1,
						name: '服务类目',
					}, {
						id: 2,
						name: '房屋装修',
					},
					{
						id: 3,
						name: '保洁清洗',
					},
					{
						id: 4,
						name: '家庭安装维修',
					},
					{
						id: 5,
						name: '便捷服务',
					},
				],
				currentCategory: [{
						id: 1,
						wap_banner_url: require('@/static/image/fwzx/fwzx.jpg'),
						front_name: '房屋装修请找我',
						name: '服务类目',
						subCategoryList: [{
								id: 1,
								wap_banner_url: require('@/static/image/fwzx/sjzx.jpg'),
								name: '设计咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 2,
								wap_banner_url: require('@/static/image/fwzx/snss.jpg'),
								name: '拆墙起墙',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 3,
								wap_banner_url: require('@/static/image/fwzx/sdzx.jpg'),
								name: '水电改造',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 4,
								wap_banner_url: require('@/static/image/fwzx/wgzx.jpg'),
								name: '铺贴瓷砖',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 5,
								wap_banner_url: require('@/static/image/fwzx/mgzx.jpg'),
								name: '木工吊顶',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 6,
								wap_banner_url: require('@/static/image/fwzx/qgzx.jpg'),
								name: '漆工粉刷',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 7,
								wap_banner_url: require('@/static/image/fwzx/zczx.jpg'),
								name: '主材更换',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							// {
							// 	id: 8,
							// 	wap_banner_url: require('@/static/image/fwzx/rzdp.jpg'),
							// 	name: '软装搭配',
							// 	ewm: require('@/static/image/ewm/ewm.jpg'),
							// 	phone: '18271717476'
							// },
							// {
							// 	id: 9,
							// 	wap_banner_url: require('@/static/image/fwzx/jjjd.jpg'),
							// 	name: '家具家电',
							// 	ewm: require('@/static/image/ewm/ewm.jpg'),
							// 	phone: '18271717476'
							// },
						],
					}, {
						id: 2,
						wap_banner_url: require('@/static/image/fwzx/fwzx.jpg'),
						front_name: '房屋装修请找我',
						name: '房屋装修',
						subCategoryList: [{
								id: 1,
								wap_banner_url: require('@/static/image/fwzx/sjzx.jpg'),
								name: '设计咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 2,
								wap_banner_url: require('@/static/image/fwzx/snss.jpg'),
								name: '水泥沙石',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 3,
								wap_banner_url: require('@/static/image/fwzx/sdzx.jpg'),
								name: '水电咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 4,
								wap_banner_url: require('@/static/image/fwzx/wgzx.jpg'),
								name: '瓦工咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 5,
								wap_banner_url: require('@/static/image/fwzx/mgzx.jpg'),
								name: '木工咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 6,
								wap_banner_url: require('@/static/image/fwzx/qgzx.jpg'),
								name: '漆工咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 7,
								wap_banner_url: require('@/static/image/fwzx/zczx.jpg'),
								name: '主材咨询',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 8,
								wap_banner_url: require('@/static/image/fwzx/rzdp.jpg'),
								name: '软装搭配',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 9,
								wap_banner_url: require('@/static/image/fwzx/jjjd.jpg'),
								name: '家具家电',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
						],
					},
					{
						id: 3,
						wap_banner_url: require('@/static/image/bjqx/bjqx.jpg'),
						front_name: '保洁清洗请找我',
						name: '保洁清洗',
						subCategoryList: [{
								id: 1,
								wap_banner_url: require('@/static/image/bjqx/rcbj.jpg'),
								name: '日常保洁',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 2,
								wap_banner_url: require('@/static/image/bjqx/xfkh.jpg'),
								name: '新房开荒',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 3,
								wap_banner_url: require('@/static/image/bjqx/jjljql.jpg'),
								name: '建筑垃圾清理',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 4,
								wap_banner_url: require('@/static/image/bjqx/qxch.jpg'),
								name: '清洗窗户',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 5,
								wap_banner_url: require('@/static/image/bjqx/qxjjjd.jpg'),
								name: '清洗家居家电',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
						],
					},
					{
						id: 4,
						wap_banner_url: require('@/static/image/bjqx/bjqx.jpg'),
						wap_banner_url: require('@/static/image/jtazwx/jtazwx.jpg'),
						front_name: '家庭安装维修请找我',
						name: '家庭安装维修',
						subCategoryList: [{
								id: 1,
								wap_banner_url: require('@/static/image/jtazwx/zcaz.jpg'),
								name: '主材安装',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 2,
								wap_banner_url: require('@/static/image/jtazwx/jkaz.jpg'),
								name: '监控安装',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 3,
								wap_banner_url: require('@/static/image/jtazwx/gdst.jpg'),
								name: '管道疏通',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 4,
								wap_banner_url: require('@/static/image/jtazwx/sgwx.jpg'),
								name: '水管维修',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 5,
								wap_banner_url: require('@/static/image/jtazwx/ydwx.jpg'),
								name: '用电故障维修',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 6,
								wap_banner_url: require('@/static/image/jtazwx/jdwx.jpg'),
								name: '家电维修',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 7,
								wap_banner_url: require('@/static/image/jtazwx/mcwx.jpg'),
								name: '门窗维修',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 8,
								wap_banner_url: require('@/static/image/jtazwx/jjczxf.jpg'),
								name: '家具瓷砖修复',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 9,
								wap_banner_url: require('@/static/image/jtazwx/ghslt.jpg'),
								name: '更换水龙头',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 10,
								wap_banner_url: require('@/static/image/jtazwx/skmf.jpg'),
								name: '收口美缝',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
						],
					},
					{
						id: 5,
						wap_banner_url: require('@/static/image/bjfw/bjfw.jpg'),
						front_name: '便捷服务请找我',
						name: '便捷服务',
						subCategoryList: [{
								id: 1,
								wap_banner_url: require('@/static/image/bjfw/kshs.jpg'),
								name: '开锁换锁',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 2,
								wap_banner_url: require('@/static/image/bjfw/shbj.jpg'),
								name: '送货搬家',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 3,
								wap_banner_url: require('@/static/image/bjfw/dj.jpg'),
								name: '代驾',
							},
							{
								id: 4,
								wap_banner_url: require('@/static/image/bjfw/pp.jpg'),
								name: '跑跑',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
							{
								id: 5,
								wap_banner_url: require('@/static/image/bjfw/esfphs.jpg'),
								name: '二手废品回收',
								ewm: require('@/static/image/ewm/ewm.jpg'),
								phone: '18271717476'
							},
						],
					}
				],
			}
		},
		created() {
			this.getContent(1);
		},
		methods: {
			getContent(index) {
				this.id = index;
				this.categoryList = this.currentCategory.find(item => item.id == index);
			},
			// 显示弹框
			toggle(item) {
				this.show = true;
				this.imageUrl = item.ewm;
				this.phoneNumber = item.phone;
			},

			// 隐藏弹框
			hideModal() {
				this.show = false;
			},

			// 拨打电话
			makePhoneCall() {
				const phoneNumber = this.phoneNumber;
				wx.makePhoneCall({
					phoneNumber: phoneNumber,
					success() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('拨打电话失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f9f9f9;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.catalog {
		flex: 1;
		width: 100%;
		background: #fff;
		display: flex;
		border-top: 1px solid #fafafa;
	}

	.catalog .nav {
		width: 220rpx;
		height: 100%;
	}

	.catalog .nav .item {
		text-align: center;
		line-height: 90rpx;
		width: 220rpx;
		height: 90rpx;
		color: #333;
		font-size: 28rpx;
		border-left: 6rpx solid #fff;
	}

	.catalog .nav .item.active {
		color: #ab2b2b;
		font-size: 36rpx;
		border-left: 6rpx solid #ab2b2b;
	}

	.catalog .cate {
		border-left: 1px solid #fafafa;
		flex: 1;
		height: 100%;
		padding: 0 30rpx 0 30rpx;
	}

	.banner {
		display: block;
		height: 222rpx;
		width: 100%;
		position: relative;
	}

	.banner .image {
		position: absolute;
		top: 30rpx;
		left: 0;
		border-radius: 4rpx;
		height: 192rpx;
		width: 100%;
	}

	.banner .txt {
		position: absolute;
		top: 30rpx;
		text-align: center;
		color: #ab2b2b;
		font-size: 28rpx;
		left: 0;
		height: 192rpx;
		line-height: 192rpx;
		width: 100%;
	}

	.catalog .hd {
		height: 108rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.catalog .hd .txt {
		font-size: 24rpx;
		text-align: center;
		color: #333;
		padding: 0 10rpx;
		width: auto;
	}

	.catalog .hd .line {
		width: 40rpx;
		height: 1px;
		background: #d9d9d9;
	}

	.catalog .bd {
		height: auto;
		width: 100%;
		overflow: hidden;
	}

	.catalog .bd .item {
		display: block;
		float: left;
		height: 216rpx;
		width: 144rpx;
		margin-right: 20rpx;
	}

	.catalog .bd .item.last {
		margin-right: 0;
	}

	.catalog .bd .item .icon {
		height: 144rpx;
		width: 144rpx;
	}

	.catalog .bd .item .txt {
		display: block;
		text-align: center;
		font-size: 24rpx;
		color: #333;
		height: 72rpx;
		width: 144rpx;
	}

	/* 遮罩层样式 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	/* 弹框样式 */
	.modal {
		width: 700rpx;
		height: 800rpx;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 弹框内部内容 */
	.modal-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 图片样式 */
	.modal-image {
		width: 475rpx !important;
		height: 647.5rpx !important;
		margin-bottom: 20rpx;
	}

	/* 电话号码和按钮 */
	.phone-section {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.phone-number {
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.call-button {
		background-color: #1aad19;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 5rpx;
		font-size: 26rpx;
	}
	.chat-button {
	  position: fixed;
	  bottom: 60px; /* 距离底部20px */
	  right: 10px; /* 距离右侧20px */
	  background-color: #007aff; /* 按钮背景颜色 */
	  color: white; /* 字体颜色 */
	  border: none; /* 去掉边框 */
	  border-radius: 50%; /* 圆形按钮 */
	  width: 60px; /* 按钮宽度 */
	  height: 60px; /* 按钮高度 */
	  font-size: 16px; /* 字体大小 */
	  text-align: center; /* 居中 */
	  line-height: 60px; /* 行高，使文字垂直居中 */
	}
</style>